<template>
  <div>
    <font color="red"><h1>租车广告</h1></font>

    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="广告名称">
        <el-input v-model="queryParams.name" clearable placeholder="优惠券标题"></el-input>
      </el-form-item>
      <el-form-item label="广告类型">
        <el-select v-model="queryParams.type" placeholder="请选择优惠券标题">
          <el-option
            v-for="dict in typeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="广告开始日期">
        <el-date-picker
          v-model="startDate"
          @change="getStartDate"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="advertisementId"
        label="广告 ID"
        width="150">
      </el-table-column>
      <el-table-column
        prop="name"
        label="广告名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="description"
        label="广告描述"
        width="120">
      </el-table-column>
      <el-table-column
        prop="type"
        label="广告类型"
        width="120">
      </el-table-column>
      <el-table-column
        prop="content"
        label="广告内容"
        width="300">
      </el-table-column>
      <el-table-column
        prop="startDate"
        label="广告开始日期"
        width="120">
      </el-table-column>
      <el-table-column
        prop="endDate"
        label="广告结束日期"
        width="120">
      </el-table-column>
      <el-table-column
        prop="clickCount"
        label="广告点击次数"
        width="120">
      </el-table-column>
      <el-table-column
        prop="impressionCount"
        label="广告展示次数"
        width="120">
      </el-table-column>
      <el-table-column
        prop="pic"
        label="广告图片"
        width="200">
        <template slot-scope="scope">
          <img :src="scope.row.pic"
               style="width: 190px;height: 150px" />
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getAdvertisementList } from "@/api/car/advertisement";
export default {
  name: "index",
  data() {
    return {
      tableData:[],
      queryParams:{},
      typeOptions:[],
      startDate:'',
    }
  }, methods: {
    getTableData(){
      getAdvertisementList(this.queryParams).then(res=>{
        this.tableData=res.data;
      })
    },
    getStartDate(date){
      this.startDate=date;
      if (this.startDate!=null){
        this.queryParams.startDate=this.startDate[0];
        this.queryParams.endDate=this.startDate[1];
      }else {
        this.queryParams.startDate='';
        this.queryParams.endDate='';
      }
    },
  }, created() {
    this.getTableData();
    this.getDicts("sys_advertisement_type").then(response => {
      this.typeOptions = response.data;
    });
  }
}
</script>

<style scoped>

</style>
